<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js 监控测试</title>
    <script src="/webDist/index.global.js"></script>
    <script></script>
  </head>
  <body>
    <script src="./initMonitor.js"></script>
    <h1>js 监控测试</h1>
    <button id="codeErr" onclick="codeError()">代码错误</button>
    <button id="normalReq" onclick="onClickXhrNormal()">xhr正常请求</button>
    <button id="exceptionReq" onclick="onClickXhrError()">xhr异常请求</button>
    <button id="normalFetch" onclick="onClickNativeFetch()">Fetch正常请求</button>
    <button id="exceptionFetch" onclick="onClickNativeErrorFetch()">Fetch异常请求</button>
    <button id="logUpload" onclick="monitorLog()">log上报</button>
    <button id="promiseError" onclick="promiseError()">promiseError</button>
    <button id="hashChange" onclick="hashChange()">改变hash</button>

    <a href="/Vue/index.html">跳到Vue页面</a>
    <a href="/React/index.html">跳到React页面</a>
    <a href="/Vue3/index.html">跳到Vue3页面</a>
    <a href="/WebPerformance/index.html">跳到WebPerformance页面</a>

    <script>
      function codeError() {
        let a = {};
        a.split('/');
      }

      function promiseError() {
        const promiseWrap = () =>
          new Promise((resolve, reject) => {
            reject('promise reject');
          });
        promiseWrap().then((res) => {
          console.log('res', res);
        });
      }

      function monitorLog() {
        wangMonitor.log({ message: { one: 111 }, tag: 'monitor log' });
      }

      function hashChange() {
        window.location.hash = 'xxx';
      }

      function onClickNativeFetch() {
        fetch('/normal/post', {
          method: 'POST',
          body: JSON.stringify({ test: 'test request body' }),
          mode: 'cors',
          headers: {
            'Content-Type': 'application/json',
          },
        }).then((res) => {
          res.text().then((res) => console.log('res', res));
        });
      }

      function onClickNativeErrorFetch() {
        fetch('/exception/post', {
          method: 'POST',
          body: JSON.stringify({ test: 'test request body' }),
          mode: 'cors',
          headers: {
            'Content-Type': 'application/json',
          },
        }).then(
          (res) => {
            res.text().then((res) => console.log('res', res));
          },
          (err) => {
            console.log('err', err);
          },
        );
      }

      function onClickXhrNormal() {
        const xhr = new XMLHttpRequest();
        xhr.open('get', '/normal');
        xhr.setRequestHeader('content-type', 'application/json');
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            console.log(xhr.responseText);
          }
        };
      }

      function onClickXhrError() {
        const xhr = new XMLHttpRequest();
        xhr.open('get', '/exception');
        xhr.setRequestHeader('content-type', 'application/json');
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            console.log(xhr.responseText);
          }
        };
      }
    </script>
  </body>
</html>
